<template>
  <div>
    <!-- 一条文章单元格 -->
  <van-cell>
    <!-- 标题区域的插槽 -->
    <template #title>
      <div class="title-box">
        <!-- 标题 -->
        <span>{{articles.title}}</span>
        <!-- 文章中只有单张图片 -->
        <!-- <van-image class="thumb" :src="articles.cover.images[0]" v-if="articles.cover.type===1">
          <template v-slot:error>图片丢失</template>
        </van-image> -->
        <img class="thumb" v-lazy="articles.cover.images[0]" v-if="articles.cover.type===1"/>

      </div>
       <!-- 文章中有三张图片，需要单独一个div -->
        <div class="thumb-box" v-if="articles.cover.type > 1">
        <!-- <van-image class="thumb" v-for="(imgUrl, index) in articles.cover.images.slice(0,3)"
             :key="index"
             :src="imgUrl">
          <template v-slot:error>图片丢失</template>
        </van-image> -->
        <img class="thumb" v-for="(imgUrl, index) in articles.cover.images.slice(0,3)"
             :key="index"
             v-lazy="imgUrl"/>
        </div>
    </template>
    <!-- label 区域的插槽 -->
    <template #label>
      <div class="label-box">
        <div>
          <span>{{articles.aut_name}}</span>
          <span>{{articles.comm_count}}</span>
          <span>{{articles.pubdate}}</span>
        </div>
        <!-- 反馈按钮 -->
        <van-icon v-if="showIcon" name="cross" @click.stop="showPopup"/>
      </div>
    </template>
  </van-cell>
   <!-- 反馈组件,指定挂载到body上 -->
    <!-- 二级反馈面板 -->
    <van-action-sheet
    v-model="isShowPopup"
    :actions="actions"
    @select="onSelect"
    @close="closePopup"
    @cancel="onCencel"
    :cancel-text="bottomText"
    get-container="body"/>

  </div>
</template>

<script>
import { firstActions, secondActions } from '@/api/reports'
export default {
  name: 'ArticlesListItem',
  props: {
    articles: {
      type: Object,
      default: null
    },
    showIcon: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      isShowPopup: false, // 是否展示反馈组件
      isSecondsPopup: false // 当前展示的面板是否为二级面板
    }
  },
  computed: {
    // 一级面板取消按钮的内容为“取消”，二级面板为“返回”
    bottomText () {
      return this.isSecondsPopup ? '返回' : '取消'
    },
    // 一二级面版显示的数组
    actions () {
      return this.isSecondsPopup ? secondActions : firstActions
    }
  },
  methods: {
    // 显示反馈组件
    showPopup () {
      this.isShowPopup = true
    },
    // 选项，默认情况下点击选项时不会自动收起
    onSelect (item) {
      // 一级面版选项
      if (!this.isSecondsPopup) {
        if (item.type === 1) {
        // 对文章不感兴趣,向arcticleList组件派发一个事件
          this.$bus.$emit('dislike', this.articles.art_id)
          this.isShowPopup = false
        } else {
        // 切换并展示二级面板数据（举报垃圾内容列表）
          this.isSecondsPopup = true
        }
      } else { // 目前只有“举报文章”有二级面板
        this.$bus.$emit('articleReports', { target: this.articles.art_id, type: item.value, remark: item.name })
        this.isSecondsPopup = false
        this.isShowPopup = false
      }
    },

    // 关闭面板，均恢复到一级面板的数组
    closePopup () {
      this.isSecondsPopup = false
    },
    // 点击取消/返回按钮
    onCencel () {
      // 当前展示的是二级面板时，返回到一级面板
      if (this.isSecondsPopup) {
        this.isSecondsPopup = false // 一级面板状态
        this.isShowPopup = true // 面板保持显示
      } else {
        // 一级面板直接关闭
        this.isShowPopup = false
      }
    }

  }
}
</script>

<style lang='less' scoped>
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span{
    margin: 0 5px;
    &:first-child{
        margin-left: 0;
    }
}

/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
